<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./imgNew5.css" />
    <script src="./jquery-1.12.4.js"></script>
    <script src="./imgNew5.js"></script>
</head>
<style>
    .parentbox {
        width: 700px;
        height: 600px;
        border: 1px solid #f00;
    }
</style>

<body>
    <div class="parentbox">
        <div class="newImg5_container">
            <div class="leftArrow"></div>
            <div class="item itemActive">
                <div class="top">
                    <img src="./articleImg/image1.jpg" alt="" />
                    <div class="header">
                        标题1 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.Lorem ipsum dolor, sit
                    amet consectetur adipisicing elit. Tempora voluptatem nulla placeat
                    modi facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息1</a>
            </div>
            <div class="item">
                <div class="top">
                    <img src="./articleImg/image2.jpg" alt="" />
                    <div class="header">
                        标题2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息2</a>
            </div>
            <div class="item">
                <div class="top">
                    <img src="./articleImg/image3.jpg" alt="" />
                    <div class="header">
                        标题3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息3</a>
            </div>
            <div class="item">
                <div class="top">
                    <img src="./articleImg/image4.jpg" alt="" />
                    <div class="header">
                        标题4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息4</a>
            </div>
            <div class="item">
                <div class="top">
                    <img src="./articleImg/image5.jpg" alt="" />
                    <div class="header">
                        标题5 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息5</a>
            </div>
            <div class="item">
                <div class="top">
                    <img src="./articleImg/image6.jpg" alt="" />
                    <div class="header">
                        标题6 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息6</a>
            </div>
            <div class="item">
                <div class="top">
                    <img src="./articleImg/image7.jpg" alt="" />
                    <div class="header">
                        标题7 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息7</a>
            </div>
            <div class="item">
                <div class="top">
                    <img src="./articleImg/image8.jpg" alt="" />
                    <div class="header">
                        标题8 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </div>
                    <div class="bg"></div>
                </div>
                <div class="body">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora
                    voluptatem nulla placeat modi facilis, impedit, ipsa ex voluptas
                    pariatur minus dignissimos distinctio consequuntur? Pariatur, in
                    numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet
                    consectetur adipisicing elit. Tempora voluptatem nulla placeat modi
                    facilis, impedit, ipsa ex voluptas pariatur minus dignissimos
                    distinctio consequuntur? Pariatur, in numquam ut neque unde
                    aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Tempora voluptatem nulla placeat modi facilis, impedit, ipsa ex
                    voluptas pariatur minus dignissimos distinctio consequuntur?
                    Pariatur, in numquam ut neque unde aliquam.
                </div>
                <a href="" class="more">>>详细信息8</a>
            </div>
            <div class="rightArrow"></div>
            <!-- <div class="bg"></div> -->
            <div class="pot">
                <span class="dot-item active" data-slide="1">
                    <!-- <img src="./img/1-2.gif" alt="" /> -->
                    1
                </span>
                <span class="dot-item" data-slide="2">
                    <!-- <img src="./img/2-2.gif" alt="" /> -->
                    2
                </span>
                <span class="dot-item" data-slide="3">
                    <!-- <img src="./img/3-2.gif" alt="" /> -->
                    3
                </span>
                <span class="dot-item" data-slide="4">
                    <!-- <img src="./img/4-2.gif" alt="" /> -->
                    4
                </span>
                <span class="dot-item" data-slide="5">
                    <!-- <img src="./img/5-2.gif" alt="" /> -->
                    5
                </span>
                <span class="dot-item" data-slide="6">
                    <!-- <img src="./img/6-2.gif" alt="" /> -->
                    6
                </span>
                <span class="dot-item" data-slide="7">
                    <!-- <img src="./img/7-2.gif" alt="" /> -->
                    7
                </span>
                <span class="dot-item" data-slide="8">
                    <!-- <img src="./img/8-2.gif" alt="" /> -->
                    8
                </span>
            </div>
        </div>
    </div>
    <div class="parentbox2"></div>

    <script>
        var options = [];

        for (var i = 0; i < 6; i++) {
            var o = {
                header: "标题" + (i + 1),
                author: "作者" + (i + 1),
                aritcleImg: "./articleImg/image" + (i + 1) + ".jpg",
                gif: "./img/" + (i + 1) + "-2.gif",
                body:
                    i +
                    1 +
                    "Lorem ipsum  , sit amet consectetur adipisicing elit. Tempora voluptatem nullaplaceat modi facilis, impedit, ipsa ex voluptas pariatur minus dignissimos distinctio consequuntur?Pariatur, in numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.Tempora voluptatem nullaplaceat modi facilis, impedit, ipsa ex voluptas pariatur minus dignissimos distinctio consequuntur?Pariatur, in numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.Tempora voluptatem nullaplaceat modi facilis, impedit, ipsa ex voluptas pariatur minus dignissimos distinctio consequuntur?Pariatur, in numquam ut neque unde aliquam.Lorem ipsum dolor, sit amet consectetur adipisicing elit.Tempora voluptatem nullaplaceat modi facilis, impedit, ipsa ex voluptas pariatur minus dignissimos distinctio consequuntur?Pariatur, in numquam ut neque unde aliquam."
            };
            options.push(o);
        }
        function buildNewImg5(options) {
            var container = '<div class="newImg5_container"></div>';
  $('.parentbox2').append(container);
  $('.parentbox2 .newImg5_container');
  var leftArrow = '<div class="leftArrow"></div>';
  var rightArrow = '<div class="rightArrow"></div>';
  $('.parentbox2 .newImg5_container').append(leftArrow);
  var item = '';
  for (var index = 0; index < options.length; index++) {
    item += "<div class=\"item\">\n  <div class=\"top\">\n      <img src=\"" + options[index].aritcleImg + "\" alt=\"\">\n      <div class=\"header\">" + options[index].header + "</div>\n      <div class=\"bg\"></div>\n  </div>\n      <div class=\"body\">" + options[index].body + "</div>\n      <a href=\"\" class=\"more\">>>\u8BE6\u7EC6\u4FE1\u606F" + index + "</a>\n  </div>";
  }
  $('.parentbox2 .newImg5_container').append(item);
  $($('.parentbox2 .newImg5_container .item')[0]).addClass('itemActive');
  $('.parentbox2 .newImg5_container').append(rightArrow);
  var item = '<div class="pot">';
  for (var index = 0; index < options.length; index++) {
    item += "<span class=\"dot-item\" data-slide=\"" + index + "\">\n              " + (index + 1) + "\n          </span>";
  }
  item += '</div>';
  $('.parentbox2 .newImg5_container').append(item);
//   $($("." + 'parentbox2' + " .pot .dot-item")[0]).addClass('active')
        }
        buildNewImg5(options);
        operation("parentbox2", { w: 700, h: 600 }, { w: 100, h: 450 });
        operation("parentbox", { w: 700, h: 600 }, { w: 100, h: 450 });
    </script>
</body>

</html>